<template>
	<view>
		<view class="title">猜你喜欢</view>
		<view class="content">			
			<navigator class="list" v-for="(item,index) in list" :key="index" :url="'../goods/detail/index'+'?id='+item.id" :style="'width:'+width+'%'">
				<image :src="item.thumb" mode="widthFix"></image>
				<view class="name">{{item.title}}</view>
				<view class="price">￥{{item.marketprice}} <text v-if="item.seecommission>0">佣金 ￥{{item.seecommission}}</text></view>
			</navigator>
		</view>
	</view>
	
</template>
<script>
/*
	<guess num="2"></guess>
	num 每行显示多少个商品
*/
var t = getApp().globalData,
e = t.requirejs('core')
export default {
	name: 'guess',
	props: {
		num:{
			type:String,
			default:"2"
			
		}
	},
	data() {
		return {
			list:[
			
			],
			width:0
		};
	},
	created() {
		this.width=100/this.num-1
		this.init()
	},
	methods: {
		//猜你喜欢 api
		init(){
			let self=this
			e.get(
				'goods.getGuessFavorGoods',
				{},
				function(e) {
					self.list=e.list
					
				}
			);
		}
	}
};
</script>
<style>
	.content{
		display: flex;
		justify-content: space-between;
		margin: 30rpx 10rpx;
		flex-wrap: wrap;
		width: 90vw;
	}
	.title{
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		height: 50rpx;
		line-height: 50rpx;
		margin: 40rpx 0 0;
		text-align: center;
	}
	.list{
		background: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		color: #333;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
	.list image{
		width: 100%;
	}
	.name{
		margin: 20rpx 15rpx 10rpx;
		font-size: 26rpx;
		overflow:hidden; 
		display: -webkit-box;
	    -webkit-box-orient: vertical; 
	    -webkit-line-clamp: 2;
	}
	.price{
		margin: 0 15rpx;
		font-size: 28rpx;
	}
	.price text{
		color: #f61743;
		padding-left: 20rpx;
		font-size: 26rpx;
	}
</style>